<script setup>
import { ref } from "vue";
import Template from "./components/Template.vue";

const loading = ref(true);
setTimeout(() => {
  loading.value = false;
}, 300);
</script>

<template>
  <Template>
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else style="height: 100%;">
      <div class="top">
        <div class="topLeft">
          <dv-decoration-3 style="width: 250px; height: 30px" />
        </div>
        <div class="topMidddle">
          <dv-decoration-5 style="width: 300px; height: 40px" />
        </div>
        <div class="topRight">
          <dv-decoration-3 style="width: 250px; height: 30px" />
        </div>
      </div>
      <div class="body">
        <div class="left">
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
        </div>
        <div class="middle">
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
        </div>
        <div class="right">
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
          <dv-border-box-8>dv-border-box-8</dv-border-box-8>
        </div>
      </div>
    </div>
  </Template>
</template>

<style scoped>
.top {
  height: 6%;
  display: flex;
  justify-content: space-around;
}
.body {
  height: 94%;
  display: flex;
}
.left {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 30%;
}
.middle {
  width: 100%;
  width: 40%;
}
.right {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 30%;
}
</style>
